<template>
  <div>
    <el-dialog title="组件" :visible.sync="dialogTableVisible">
      <div class="top"></div>
      <div class="comp">
        <component :is="isShowComp" :tableList="gridData"></component>
      </div>
      <span slot="footer" class="dialog-footer">
         <el-button @click="dialogTableVisible = false">取 消</el-button>
         <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import feedback from '@/views/Demo/components/feedback'
import noFeedback from './components/no-feedback'

export default {
  components: {
    feedback,
    noFeedback
  },
  computed: {
    isShowComp () {
      let comp = ['noFeedback', 'feedback']
      return comp[this.showModule]
    }
  },
  name: 'TableDialog',
  data () {
    return {
      showModule: 0,
      feedbackTable: [
        {
          tableData: [
            {
              compareResult: '冲突',
              compareFileName: '中国银保监会关于调整交强险责任限额和费率浮动系数的公告',
              fileName: '中国银保监会办公厅关于加强商业保理企业监督管理的通知',
              similarity: '80%',
              feedback: '',
              advice: ''
            }, {
              compareResult: '冲突',
              compareFileName: '中华人民共和国保险法',
              fileName: '关于加强信托公司房地产业务监管有关问题的通知',
              similarity: '8%',
              feedback: '',
              advice: ''
            }, {
              compareResult: '冲突',
              compareFileName: '保险销售从业人员监管办法',
              fileName: '互联网保险业务监管暂行办法',
              similarity: '22%',
              feedback: '',
              advice: ''
            }, {
              compareResult: '冲突',
              compareFileName: '保险公司资本保证金管理办法',
              fileName: '典当管理办法',
              similarity: '44%',
              feedback: '',
              advice: ''
            }
          ]
        },
        {
          tableData: [
            {
              compareResult: '冲突',
              compareFileName: '中国银保监会关于调整交强险责任限额和费率浮动系数的公告',
              fileName: '中国银保监会办公厅关于加强商业保理企业监督管理的通知',
              similarity: '80%',
              feedback: '',
              advice: ''
            }, {
              compareResult: '冲突',
              compareFileName: '中华人民共和国保险法',
              fileName: '关于加强信托公司房地产业务监管有关问题的通知',
              similarity: '8%',
              feedback: '',
              advice: ''
            }
          ]
        }
      ],
      tableList: [
        {
          tableData: [
            {
              compareResult: '冲突',
              compareFileName: '中国银保监会关于调整交强险责任限额和费率浮动系数的公告',
              fileName: '中国银保监会办公厅关于加强商业保理企业监督管理的通知',
              similarity: '80%'
            }, {
              compareResult: '冲突',
              compareFileName: '中华人民共和国保险法',
              fileName: '关于加强信托公司房地产业务监管有关问题的通知',
              similarity: '8%'
            }
          ]
        },
        {
          tableData: [
            {
              compareResult: '冲突',
              compareFileName: '中国银保监会关于调整交强险责任限额和费率浮动系数的公告',
              fileName: '中国银保监会办公厅关于加强商业保理企业监督管理的通知',
              similarity: '80%'
            }, {
              compareResult: '冲突',
              compareFileName: '中华人民共和国保险法',
              fileName: '关于加强信托公司房地产业务监管有关问题的通知',
              similarity: '8%'
            },
            {
              compareResult: '冲突',
              compareFileName: '保险销售从业人员监管办法',
              fileName: '互联网保险业务监管暂行办法',
              similarity: '22%'
            }
          ]
        },
        {
          tableData: [
            {
              compareResult: '冲突',
              compareFileName: '中国银保监会关于调整交强险责任限额和费率浮动系数的公告',
              fileName: '中国银保监会办公厅关于加强商业保理企业监督管理的通知',
              similarity: '80%'
            }, {
              compareResult: '冲突',
              compareFileName: '中华人民共和国保险法',
              fileName: '关于加强信托公司房地产业务监管有关问题的通知',
              similarity: '8%'
            },
            {
              compareResult: '冲突11111',
              compareFileName: '保险销售从业人员监管办法',
              fileName: '互联网保险业务监管暂行办法',
              similarity: '22%'
            }, {
              compareResult: '冲突',
              compareFileName: '保险公司资本保证金管理办法',
              fileName: '典当管理办法',
              similarity: '44%'
            }
          ]
        }
      ],
      noFeedbackTable: [{
        compareResult: '冲突',
        compareFileName: '中国银保监会关于调整交强险责任限额和费率浮动系数的公告',
        fileName: '中国银保监会办公厅关于加强商业保理企业监督管理的通知',
        similarity: '80%'
      }, {
        compareResult: '冲突',
        compareFileName: '中华人民共和国保险法',
        fileName: '关于加强信托公司房地产业务监管有关问题的通知',
        similarity: '8%'
      }, {
        compareResult: '冲突',
        compareFileName: '保险销售从业人员监管办法',
        fileName: '互联网保险业务监管暂行办法',
        similarity: '22%'
      }, {
        compareResult: '冲突',
        compareFileName: '保险公司资本保证金管理办法',
        fileName: '典当管理办法',
        similarity: '44%'
      }],
      gridData: [],
      dialogTableVisible: false
    }
  },
  methods: {
    init () {
      let num = Math.floor(Math.random() * 2 + 1)
      if (num === 1) {
        this.showModule = 0 // 无反馈
        this.gridData = this.tableList
      } else {
        this.showModule = 1 // 有反馈
        this.gridData = this.feedbackTable
      }
      this.dialogTableVisible = true
    },
    handleConfirm () {
      console.log(this.gridData)
    }
  }
}
</script>

<style scoped>

</style>
